<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计算属性>watch>method</title>
		<style>
			.activated{
				color: red;
			}
		</style>
	</head>
	<body>
		<div id="cal">
			<!-- <div :class="{activated:isActivated}" @click="changeActivated">{{fullName}}{{age}}</div> -->
			<!-- <div :class="[activated]" @click="changeActivated">{{fullName}}{{age}}</div> -->
			<div @click="changeActivated" :style="styleObj">{{fullName}}{{age}}</div>
		</div>
		<script src="js/vue.js"></script>
		<script>
			let vm = new Vue({
				el:'#cal',
				data:{
					firstName:'Horcy',
					secondNname:'Zhong',
					age:21,
					// isActivated:false
					// activated:''
					styleObj:{
						color:'red'
					}
				},
				methods:{
					/* changeActivated:function(){
						this.activated = (this.activated === 'activated' ? '' : 'activated')
					}, */
					changeActivated:function(){
						this.styleObj.color = this.styleObj.color === 'red' ? 'black' : 'red';
					}
				},
				/* methods:{
					fullName:function(){
						console.log('change');
						return this.firstName+' '+this.secondNname;
					}
				} */
				/* watch:{
					firstName:function(){
						console.log('change');
						this.fullName = this.firstName + ' ' + this.secondNname;
					},
					secondName:function(){
						console.log('change');
						this.fullName = this.firstName + ' ' + this.secondNname;
					}
				} */
				computed:{
					/* fullName:function(){
						console.log('change');
						return this.firstName+' '+this.secondNname;
					} */
					fullName:{
						get:function(){
							return this.firstName+' '+this.secondNname;
						},
						set:function(value){
							let values = value.split(' ');
							this.firstName = values[0];
							this.secondNname = values[1];
						}
					}
				}
			})
		</script>
	</body>
</html>
